<template>
  <div class="caidan">
    <el-menu
      :collapse="isCollapse"
      :default-active="pathActive"
      :unique-opened="true"
      class="el-menu-vertical-demo"
      active-text-color="#2978FF"
      router
    >
      <label v-for="item in navMenus" :key="item.id">
        <!-- 二级菜单 -->
        <el-submenu
          :index="item.id"
          v-if="item.children"
          @click.native="goto(item.url)"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span> {{ item.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :index="v.route"
              v-for="(v, i) in item.children"
              :key="i"
            >
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ v.title }}</span>
              </template>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- 一级菜单 -->
        <el-menu-item :index="item.route" v-else @click="handleRoute(item)">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </label>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "NavMenu",
  data() {
    return {
      isCollapse: false,
      pathActive: "",
      navMenus: [],
    };
  },
  methods: {
    //二级菜单
    handleRoute(router) {
      //   console.log(router);
      //   this.$router.push(`${router.url}`);
    },
    goto(menu) {
      // 通过菜单URL跳转至指定路由
      //   if (menu) {
      //     // this.$router.push(menu);
      //     this.$router.push({
      //       path: item.route,
      //       query: { menuId: item.menuId },
      //     });
      //   }
      //
    },
  },
  mounted() {
    //第一次登录进来  等待头部接口完成存储数据再获取左边数据
    this.$bus.$on("renderMenu", () => {
      let menuData = JSON.parse(sessionStorage.getItem("menu"));
      if (menuData) {
        this.navMenus = [];
        this.navMenus = [...menuData[this.menuIndex].children];
      }
    });
  },
  created() {
    // this.pathActive = "/" + this.$route.name;
    // console.log(this.$route.name);
  },
  computed: {
    ...mapState(["menuIndex"]),
  },
  watch: {
    menuIndex: {
      handler() {
        let menuData = JSON.parse(sessionStorage.getItem("menu"));
        if (menuData) {
          this.navMenus = [];
          this.navMenus = [...menuData[this.menuIndex].children];
        }
      },
      immediate: true,
    },
    $route: {
      immediate: true,
      handler(to) {
        this.pathActive = to.path;
        // if (to.fullPath.endsWith("testone")) this.defaultActive = to.route; // 给defaultActive重新赋值为当前组件的路由地址
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.caidan {
  height: 100%;
}
.el-menu {
  border-right: transparent !important;
  background-color: #304156;
  height: calc(100vh - 60px);
  overflow: auto;
  .el-menu-item {
    height: 55px;
    line-height: 55px;
    color: #cccccc;
    text-align: start;
  }
  &::-webkit-scrollbar {
    width: 0;
  }
  .el-menu-item.is-active {
    color: #2978ff;
    .secon {
      background-color: #2978ff;
    }
  }
  .el-menu-item:hover {
    color: #2978ff;
    .secon {
      background-color: #2978ff;
    }
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: #304156;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
  .el-menu-item-group {
    padding-left: 20px;
    box-sizing: border-box;
    background-color: #263343 !important;
    .el-menu-item {
      background-color: #263343 !important;
    }
  }
  .el-menu-vertical-demo {
    background-color: #304156;
    color: #cccccc;
    // height: 100vh;
    .menuImg {
      margin-right: 15px;
    }
  }
}
</style>

<style>
.el-popover__reference:hover {
  cursor: pointer;
}
.el-menu {
  background-color: #304156;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
}
.el-menu-item-group__title {
  padding: 0;
}

.el-menu--popup {
  padding: 0;
}
.el-submenu__title {
  color: #cccccc;
  text-align: start;
}
.el-submenu__title:hover {
  background-color: #304156 !important;
  color: #2978ff;
}
.tuichu {
  text-align: center;
}
</style>
